
@import 'variables';

#goods-train{
    seed-infinite-scroll #seed-infinite-scroll{
        background-color: #fff;
    }
    seed-modal .seed-modal-wrapper{
        overflow-y: scroll;
    }
    header{
        height: pxTorem(88);
        .day-btn{
            width: pxTorem(40); 
            height: pxTorem(40);
            &.left{
                @include icon(40, 40, '#{$icons-path}/icon_training_left.png');
                margin-left: pxTorem(24);
            }
            &.right{
                @include icon(40, 40, '#{$icons-path}/icon_training_right.png');
                margin-right: pxTorem(24);
            }
        }
        .show-time{
            line-height: pxTorem(88);
            height: pxTorem(88);
            color: color(c2);
            @include font-size(f2);
            .arrow{
                @include icon(28, 28, '#{$icons-path}/icon_training_drop_down.png');
                margin-left: pxTorem(5);
            }
        }
    }
    .count{
        .title{
            padding-left: pxTorem(24);
            line-height: pxTorem(88);
            position: relative;
            @include font-size(f3);
            font-weight: bolder;
            color: color(c2);
            &:after{
                content: '';
                background-color: color(c1);
                width: pxTorem(6);
                height: pxTorem(28);
                position: absolute;
                top: pxTorem(30);
                left: 0;
            }
        }
    }
    .pic{
        height: pxTorem(292);
        padding-top: pxTorem(20);
        .all {
            &:nth-of-type(1){
                margin-right: pxTorem(114);
            }
            width: pxTorem(200);
            height: pxTorem(200);
            position: relative;
            border-radius: 50%;
            box-shadow: inset 0 0 0 pxTorem(16) color(c9);
            .desc{
                width: pxTorem(150);
                text-align: center;
                position: absolute;
                bottom: pxTorem(-60);
                left: 50%;
                transform: translateX(-50%);
                color: color(c2);
                @include font-size(f4);
            }
            .middle{
                width: pxTorem(200);
                height: pxTorem(200);
                line-height: pxTorem(200);
                color: color(c15);
                text-align: center;
            }
            .spinner_left, .spinner_right {
                width: pxTorem(200);
                height: pxTorem(200);
                position: absolute;
                top: 0; 
                left: 0;    
            }
            .left, .right {
                transition: all .5s linear;
                width: pxTorem(200);
                height: pxTorem(200);
                box-shadow: inset 0 0 0 pxTorem(16) color(c15);
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
            }
            .spinner_left, .left {
                clip: rect(0, pxTorem(100), auto, 0);
            }
            .spinner_right, .right {
                clip: rect(0, auto, auto, pxTorem(100));
            }
            &.course{
                .middle{
                    color: color(c13);
                }
                .spinner_left .left, .spinner_right .right {
                    box-shadow: inset 0 0 0 pxTorem(16) color(c13);
                }
            }
        }
    }
    .each-course{
        .title{
            padding-left: pxTorem(24);
            line-height: pxTorem(88);
            position: relative;
            @include font-size(f3);
            font-weight: bolder;
            color: color(c2);
            &:after{
                content: '';
                background-color: color(c1);
                width: pxTorem(6);
                height: pxTorem(28);
                position: absolute;
                top: pxTorem(30);
                left: 0;
            }
        }
        .item{
            height: pxTorem(130);
            padding: 0 pxTorem(24);
            flex-direction: column;
            justify-content: center;
            position: relative;
            .class-name{
                line-height: 1.1;
                @include font-size(f2);
                color: color(c2);
                padding-bottom: pxTorem(16);
            }
            .class-desc{
                line-height: 1.1;
                @include font-size(f5);
                color: color(c4);
                .school{
                    padding-right: pxTorem(30);
                }
            }
            .choose{
                position: absolute;
                right: pxTorem(14);
                top: pxTorem(50);
                width: pxTorem(20);
                height: pxTorem(30);
                background: url('#{$icons-path}/arrow.png') no-repeat;
                background-size: contain;
                transform: rotate(-90deg);
                -webkit-transform: rotate(-90deg);
              }
        }
    }
    .seed-default-graph{
        padding: pxTorem(90) 0 pxTorem(90);
    }
}